import React, { useEffect, useState } from "react";
import { Button, Modal, Table, Upload, UploadFile } from "antd";
import type { TableColumnsType, TableProps } from "antd";
import { DataRecord } from "@prisma/client";
import { Image } from "antd";
import styles from "@/styles/Validation.module.css";
import { CaretRightOutlined, UploadOutlined } from "@ant-design/icons";
import { UploadChangeParam } from "antd/es/upload";

type TableRowSelection<T> = TableProps<T>["rowSelection"];

const columns: TableColumnsType<DataRecord> = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    align: "center",
    width: 80,
    render: (text, record, index) => `${index + 1}`,
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    align: "center",
    width: 300,
  },
  {
    title: "光照",
    dataIndex: "light",
    key: "light",
    align: "center",
  },
  {
    title: "云雾",
    dataIndex: "fog",
    key: "fog",
    align: "center",
  },
  {
    title: "几何畸变",
    dataIndex: "geo",
    key: "geo",
    align: "center",
  },
  {
    title: "高斯噪声",
    dataIndex: "gaussian",
    key: "gaussian",
    align: "center",
  },
  {
    title: "白噪声",
    dataIndex: "white",
    key: "white",
    align: "center",
  },
  {
    title: "高斯模糊",
    dataIndex: "blur",
    key: "blur",
    align: "center",
  },
  {
    title: "缩略图",
    key: "image",
    dataIndex: "name",
    align: "center",
    width: 90,
    render: (text) => {
      return (
        <Image
          width={40}
          height={40}
          src={`/api/image/${text}`}
          alt={"样本图片"}
        />
      );
    },
  },
];

function initRemoteAlgorithm(names: string) {
  fetch(`/api/validation/initRemote/?names=${names}`);
}

export default function Validation() {
  const [records, setRecords] = useState<DataRecord[]>([]);
  useEffect(() => {
    fetch("http://localhost:3000/api/dataRecord")
      .then((res) => res.json())
      .then((data) => {
        setRecords(data);
      });
  }, []);

  // 表格选择
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataRecord> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const runAlgorithm = () => {
    const fileNames = [];
    for (let record of records) {
      if (selectedRowKeys.includes(record.id)) fileNames.push(record.name);
    }
    initRemoteAlgorithm(fileNames.join(","));
    const source = new EventSource("http://localhost:3004/api/run");
    source.onmessage = (event) => {
      if (event.data === "done") return source.close();
      const { name, label } = JSON.parse(event.data);
      console.log(name, label);
    };
    source.onerror = (event) => {
      console.log("SSE出错", event);
      source.close();
    };
  };

  return (
    <>
      <div className={styles.toolBar}>
        <Button
          type="primary"
          onClick={runAlgorithm}
          disabled={selectedRowKeys.length === 0}
        >
          测试
          <CaretRightOutlined />
        </Button>
      </div>
      <Table
        rowSelection={rowSelection}
        rowKey={(record) => record.id}
        columns={columns}
        dataSource={records}
        bordered
        scroll={{ y: 680 }}
      />
    </>
  );
}
